import React, { Component } from 'react';
import './index.css'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as getDetail from "../../store/actionCreators";
import * as addBook from "../../store/actionCreators";
import Top from '../../components/Top';
import Public from '../../components/Public'
class Detail extends Component {
    state={
        class:false
    }
    componentDidMount() {
        const { Id } = this.props.history.location.state
        this.props.getDetail(Id)
    }
    add(data){
        console.log(data);
        this.props.addBook(data)
    }
    render() {
        const { list } = this.props
        return (
            <div className="detail_box">
                <Top name={'作品详情'} />
                <div className='book_content'>
                    <div className='t'>
                        <img src={list.cover_url} alt="" />
                        <div className='r'>
                            <h3>{list.book_name}</h3>
                            <p>{list.author_name}</p>
                            <div className='ivu'>{list.cname}</div>
                        </div>
                    </div>
                    <div className='b'>
                        <button style={{ backgroundColor: 'red' }}> 开始阅读 </button>
                        <button onClick={()=>{
                            this.add(list)
                        }}>加入书架</button>
                        <button>批量订阅</button>
                    </div>
                </div>
                <div className='desc'>
                    <div className={this.state.class? 'line2' : 'line1'}  onClick={()=>{
                        this.state.class=!this.state.class
                        this.setState({class:this.state.class})
                    }}>{list.description}</div>
                </div>
                <div className='part'>
                    <div>目录</div>
                    <div style={{ color: '#999' }}>
                        <span> 更新{list.last_update_chapter_name}</span>
                        <i className='iconfont iconjiankuohao1 icon'></i>
                    </div>
                </div>
                <div className='comment'>
                    <div className='title'>
                        <div>书评区</div>
                        <div style={{ color: '#ff6650' }}>写书评</div>
                    </div>
                    <ul className='container'>
                        {list.comment &&
                        list.comment.map(val => {
                            return (
                                <li key={val.id}>
                                    <div className='avat'>
                                        <img src={val.user_image} alt="" />
                                        <div className='content'>{val.nick_name}</div>
                                    </div>
                                    <div style={{ lineHeight: '.3rem' }}>
                                        {val.content}
                                    </div>
                                    <div className='time'>
                                        <i className='iconfont iconshijianlishijilujishizhongbiaoxianxing '></i>
                                        {val.create_date}
                                    </div> 
                                </li>
                            )
                        })}
                        <div className='tip' className={list.comment &&list.comment.length? 'a' : 'tip'} >暂无评论</div>
                        <div className='more'className={list.comment &&list.comment.length? 'more' : 'a'} >
                            更多评论
                            <i className='iconfont iconjiankuohao1 icon'></i>
                        </div>
                    
                    </ul>
                </div>
                <Public data={list.like_book} title={'猜你喜欢'} />
                <div style={{ height: '.3rem' }}></div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        list: state.detail,
    }
}
function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators(getDetail, dispatch),
        ...bindActionCreators(addBook, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail);